<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">设备群控系统</div>
      <el-form :model="param" :rules='rules' ref='param' label-width="0px" class="ms-content">
        <el-select v-model="param.userType" placeholder="请选择" class="select">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-form-item prop="userName">
          <el-input v-model="param.userName" placeholder="请输入账号">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input type="password" placeholder="请输入密码" v-model="param.passWord" @keyup.enter.native="submitForm('param')">
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('param')">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      param: {
        userType: '0',
        userName: 'admin',
        passWord: '123456'
      },
      rules: {
        userType: [{ required: true, message: '请选择用户类型', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      options: [{
        value: '0',
        label: '用户工号'
      }, {
        value: '1',
        label: '手机号'
      }],
      value: ''
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
            const userInfo = {
                status: 200,
                msg: 'success',
                data: {
                  name: '监控系统',
                  tel: '18624093060',
                  token: 'token',
                  id: '123'
                }
              }

              this.$message.success('登录成功')
              this.$store.commit('setUser', userInfo.data)
              this.$store.commit('setToken', userInfo.data.token)
              this.$router.push('/dashboard')
              
        }
      })
    }
  }
}
</script>
<!--
           this.loading.startLoading()
          this.api.login.login(this.param).then(res => {
            console.log(res)
            this.loading.endLoading()
            if (res.status === 200) {
              this.$message.success('登录成功')
              this.$store.commit('setUser', res.data)
              this.$store.commit('setToken', res.data.token)
              this.$router.push('/dashboard')
            } else {
              this.$message.error(res.msg)
            }
          }) 
          -->
<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/login-bg.jpg);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.select {
  width: 100%;
  margin-bottom: 22px;
}
</style>
